<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style>
span{
margin-left: 10px;
}
</style>
<body>
    <p th:text="'Hello, ' + ${#httpServletRequest.remoteUser} + '!'" />
    <form th:action="@{/file/add-file}" enctype="multipart/form-data"  method="post">
                <div><label> file : <input type="file" name="file"/> </label></div>
                <input type="hidden" name="folderId" th:value="${currentFolder.id}"/>
                <div><input type="submit" value="upload"/></div>
     </form>

      <form th:action="@{/file/add-folder}" method="post">
                     <div><label> fileName : <input type="text" name="folderName"/> </label></div>
                     <input type="hidden" name="parentId" th:value="${currentFolder.id}"/>
                     <div><input type="submit" value="add folder"/></div>
          </form>

          <form th:action="@{/file/search-folders-and-files}" method="post">
                     <div><label> keyword : <input type="text" name="keyword"/> </label></div>
                     <div><input type="submit" value="search"/></div>
          </form>

<div th:if="${parentFolder!=null}">
            <a th:href="${viewUrl}+'?folderId='+${parentFolder.id}"><span>go back</span></a>
        </div>

<div th:if="${parentFolder==null}">
            <a th:href="${viewUrl}"><span>view list</span></a>
        </div>
<!--loop folder-->
     <div>
          <div data-th-each="folder:${folders}">
          <span>folder</span>
          <a th:href="${viewUrl}+'?folderId='+${folder.id}">
          <span data-th-text="${folder.folderName}"></span>
          </a>
          <a th:href="'/file/delete-folder?id='+ ${folder.id}"><span>delete</span></a>
</div>

<!--loop files -->
          <div data-th-each="cloudFile:${cloudFiles}">
          <span>cloudFile</span>
          <a th:href="'/file/down-load-file?id='+${cloudFile.id}">
          <span data-th-text="${cloudFile.fileName}"></span>
          </a>

          <a th:href="'/file/delete-file?id='+ ${cloudFile.id}"><span>delete</span></a>
</div>


</div>

</body>
</html>
